<template>
  <div class="box">
    <div>
      <h4>没有使用 UserForm</h4>
      <p><input type="text" v-model="username" /></p>
      <p><input type="password" v-model="password" /></p>
    </div>
    <div>
      <h4>带有提交按钮的 UserForm</h4>
      <user-form v-model="exampleForm" />
    </div>
    <div>
      <h4>实时提交的 UserForm</h4>
      <user-form v-model="exampleForm" is-realtime />
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { mapFields } from 'vuex-map-fields'

export default {
  name: 'FormPage',
  computed: {
    ...mapState({
      form: (state) => JSON.parse(JSON.stringify(state.exampleForm)),
    }),
    ...mapFields(['exampleForm', 'exampleForm.username', 'exampleForm.password']),
  },
  methods: {
    ...mapActions({
      login: 'login',
    }),
    submit() {
      console.log('form 适合传给 axios', this.form)
      this.login(this.form)
      console.log('exampleForm 不适合传给 axios', this.exampleForm)
      this.login(this.exampleForm)
    },
  },
}
</script>

<style scoped lang="scss">
.box {
  display: flex;
  gap: 20px;

  > div {
    flex: 1;
    background-color: aliceblue;
    border-radius: 4px;
  }
}
</style>
